<template>
  <div class="shopInfo">
    <div class="shopInfo-header">
      <img class="bgImg" v-lazy="imgBaseUrl+shopInfo.image_path" alt="">
      <div class="header-info">
        <img class="shopImg" v-lazy="imgBaseUrl+shopInfo.image_path" alt="">
        <div class="shopText">
          <h3>{{shopInfo.name}}</h3>
          <p>商家配送／准时送达／{{shopInfo.tips}}</p>
          <p>公告: {{shopInfo.promotion_info}}</p>
        </div>
      </div>
    </div>
    <div class="shopInfo-content">
      <van-tabs v-model="active">
        <van-tab title="商品">
          <FoodsList :shopId="shopId" :shopInfo="shopInfo"></FoodsList>
        </van-tab>
        <van-tab title="评价">
          <Rate :shopId="shopId"></Rate>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import FoodsList from '../../../../components/FoodsList'
import Rate from '../../../../components/Rate'

export default {
  name: 'index',
  props: {
    shopId: {
      type: String
    }
  },
  data: () => ({
    shopInfo: {},
    active: 0
  }),
  created () {
    this.getShopInfo()
  },
  methods: {
    async getShopInfo () {
      const { data } = await this.$http.getShopInfo(this.shopId)
      this.shopInfo = data
      this.shopInfo.tips = data.piecewise_agent_fee.tips
    }
  },
  computed: {},
  components: {
    FoodsList,
    Rate
  }
}
</script>

<style lang="scss" scoped>
  .shopInfo {
    padding-bottom: 75px;

    .shopInfo-header {
      height: 146px;
      overflow: hidden;
      position: relative;

      .bgImg {
        width: 100%;
        filter: blur(10px);
      }

      .header-info {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: rgba(119, 103, 137, 0.4);
        position: absolute;
        top: 0;

        .shopImg {
          height: 100%;
          border-radius: 4px;
        }

        .shopText {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 440px;
          height: 100%;
          color: #ffffff;

          h3, p {
            margin: 0;
          }

          h3 {
            font-size: 40px;
          }

          p {
            font-size: 18px;
          }
        }
      }
    }

    .shopInfo-content {
      /deep/ .van-tabs__wrap {
        height: 84px;
        border-bottom: 1px solid #eeeeee;

        /deep/ .van-tab__text {
          line-height: 84px;
          font-size: 30px;
          color: #666666;
        }

        /deep/ .van-tabs__line {
          width: 90px;
          height: 6px;
          background: #3190e8;
        }
      }
    }
  }
</style>
